<template>
  <view>

				<!-- 基础组件：搜索框 -->
				<s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" style="background-color: #FF3B16;border-radius: 0;"/>
				<!-- 基础组件：公告栏 -->
				<view style="background-color: #FF3B16;" v-if="type === 'NoticeBar'">
					<s-notice-block :data="data" style="background-color: #FF3B16;border: 1px solid #FF3B16;padding: 16rpx"/>
				</view>
				<!-- 图文组件：图片轮播 -->
				<view v-if="type === 'Carousel'" style="width: 100%;height: 240rpx;background-color: #FF3B16;border-bottom-left-radius: 40rpx;border-bottom-right-radius: 40rpx;">
					<s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" style="border-bottom-left-radius: 40rpx;border-bottom-right-radius: 40rpx;"/>
				</view>

    <!-- 基础组件：菜单导航 -->
    <s-menu-button v-if="type === 'MenuSwiper'" :data="data" :styles="styles" />
    <!-- 基础组件：列表导航 -->
    <s-menu-list v-if="type === 'MenuList'" :data="data" />
    <!-- 基础组件：宫格导航 -->
    <s-menu-grid v-if="type === 'MenuGrid'" :data="data" :styles="styles" />
    <!-- 基础组件：弹窗广告 -->
    <s-popup-image v-if="type === 'Popover'" :data="data" />
    <!-- 基础组件：悬浮按钮 -->
    <s-float-menu v-if="type === 'FloatingActionButton'" :data="data" />

    <!-- 图文组件：图片展示 -->
    <s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
    <!-- 基础组件：标题栏 -->
    <s-title-block v-if="type === 'TitleBar'" :data="data" :styles="styles" />
    <!-- 图文组件：广告魔方 -->
				<view class="cube_card" v-if="type === 'MagicCube'">
					<view class="cube_top">
						<view class="title_top" style="width: 50%;border-right: 1px solid #c7c7c7;">
							<view class="title">首饰</view>
							<view class="remark">特价商品			佣金及时到账</view>
						</view>
						<view class="title_top" style="width: 50%;padding-left: 10rpx;">
							<view class="title">养生</view>
							<view class="remark">特价商品			佣金及时到账</view>
						</view>
					</view>
					<view style="margin-top: -12rpx;">
						<s-image-cube :data="data" :styles="styles"/>
					</view>
				</view>
    <!-- 图文组件：视频播放 -->
    <s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
    <!-- 基础组件：分割线 -->
    <s-line-block v-if="type === 'Divider'" :data="data" />
    <!-- 图文组件：热区 -->
    <s-hotzone-block v-if="type === 'HotZone'" :data="data" :styles="styles" />

    <!-- 商品组件：商品卡片 -->
    <s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
    <!-- 商品组件：商品栏 -->
				<view class="card_list" v-if="type === 'ProductList'">
					<view class="card_top">
						<text class="card_text">热门商品</text>
						<text class="card_texts">实时热销直降</text>
					</view>
					<s-goods-shelves :data="data" :styles="styles" style="padding: 20rpx;"/>
				</view>

    <!-- 营销组件：拼团 -->
    <s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
    <!-- 营销组件：秒杀 -->
    <s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
    <!-- 营销组件：积分商城 -->
    <s-point-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" />
    <!-- 营销组件：小程序直播（暂时没有这个功能） -->
    <s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
    <!-- 营销组件：优惠券 -->
				<view v-if="type === 'CouponCard'" style="margin-top: 50rpx;">
					<s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" style="border-top-left-radius: 8rpx;border-top-right-radius: 8rpx;"/>
				</view>
    <!-- 营销组件：文章 -->
    <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" />

    <!-- 用户组件：用户卡片 -->
				<view v-if="type === 'UserCard'" style="background-color: #F5D8A7; border: 1px solid #F5D8A7;">
					<s-user-card v-if="type === 'UserCard'" :data="data" :styles="styles" style="background-color: #F5D8A7; border: 1px solid #F5D8A7;" />
				</view>
    <!-- 用户组件：用户订单 -->
    <s-order-card v-if="type === 'UserOrder'" :data="data" :styles="styles" />
    <!-- 用户组件：用户资产 -->
    <s-wallet-card v-if="type === 'UserWallet'" :data="data" :styles="styles" />
    <!-- 用户组件：用户卡券 -->
    <s-coupon-card v-if="type === 'UserCoupon'" :data="data" :styles="styles" />
  </view>
</template>

<script setup>
  /**
   * 装修组件 - 组件集
   */
  const props = defineProps({
    type: {
      type: String,
      default: '',
    },
    data: {
      type: Object,
      default() {},
    },
    styles: {
      type: Object,
      default() {},
    },
  });
  function onSearch() {}
</script>

<style scoped lang="scss">
	// 商品栏
	.card_list{
		/* background: linear-gradient(to bottom, #ffbcab, #efeeee); */
		background-color: white;
		height: 100%;
		width: 100%;
		border-radius: 20rpx;
		margin-top: 30rpx;
		.card_top{
			background: linear-gradient(to bottom, #f4d7a5, #ffffff);
			padding: 20rpx 20rpx 30rpx 20rpx;
			border-radius: 20rpx;
			color: #aa7148;
			.card_text{
				font-weight: 560;
				font-size: 32rpx;
			}
			.card_texts{
				margin-left: 30rpx;
				font-size: 24rpx;
				font-weight: 0;
			}
		}
	}
	// 广告魔方样式
	.cube_card{
		height: 100%;
		width: 100%;
		border-radius: 20rpx;
		// margin-bottom: 50rpx;
		.cube_top{
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			// #ffa277
			background: linear-gradient(to bottom, #ffb38f, #ffffff);
			height: 88rpx;
			border-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			color: #aa7148;
			.title_top{
				.title{
					font-size: 32rpx;
					color: #fd6016;
					margin-top: 10rpx;
				}
				.remark{
					font-size: 26rpx;
					color: #7c7c7c;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
